<template>
  <div ref="copyOrMoveModal" v-if="visible" class="modal">
    <a-modal
      :getContainer="() => $refs.copyOrMoveModal"
      :visible="visible"
      :width="1400"
      :title="`【${data.name}】文件${showType.substring(showType.length - 4) === 'Copy' ? '复制' : '移动'}到`"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <div class="flex" style="flex-direction: column">
        <div class="flex" style="height: 550px">
          <div class="w-85 h-full p-4 flex-shrink-0 border-r flex flex-col border-gray-200 overflow-y-auto">
            <a-input class="mb-4" v-model:value.trim="state.searchName" placeholder="请输入搜索关键字" allow-clear @change="getFolderTree">
              <template #suffix v-if="!state.searchName">
                <SearchOutlined style="color: #999" />
              </template>
            </a-input>
            <a-tree
              v-model:selectedKeys="state.selectedKeys"
              v-model:expandedKeys="state.expandedKeys"
              show-icon
              class="tree-warpper"
              :load-data="onLoadData"
              :tree-data="state.treeData"
              :field-names="{ title: 'name', children: 'children', key: 'id' }"
              @select="(_, { node }) => folderClick(node)"
            >
            </a-tree>
          </div>
          <div class="px-4" :style="{ width: 'calc(100% - 320px)' }">
            <DynamicForm class="mt-4" :config="dyConfig" :questions="dyQuestions" />
            <DynamicTable :tables="dyTable" :config="dyTableConfig" ref="fileRef">
              <!-- 面包屑 -->
              <template #title>
                <div>
                  <a-breadcrumb>
                    <template v-for="(item, index) in breadcrumbs" :key="index">
                      <a-breadcrumb-item :class="index === breadcrumbs.length - 1 ? null : 'hierarchy'" @click="folderClick(item)">{{ item.name }}</a-breadcrumb-item>
                    </template>
                  </a-breadcrumb>
                </div>
              </template>
              <!-- 文件夹及文件-->
              <template #fileImg="{ record }">
                <img v-if="record.folder" class="w-11.5 h-11.5 cursor-pointer" @click="folderClick(record)" :src="personalFolder(record)" alt="" />
              </template>
              <template #fileName="{ record }">
                <div>
                  <p class="text-4 text-black text-opacity-65 cursor-pointer" style="margin: 0">
                    <span v-if="record.folder" @click="folderClick(record)">{{ record.name }}</span>
                  </p>
                </div>
              </template>
              <template #size="{ record }">
                <div class="content fix-margin">
                  <p>{{ changeByte(record.size) }}</p>
                </div>
              </template>
              <template #modifier="{ record }">
                <div class="content fix-margin">
                  <!-- <p>修改人</p> -->
                  <p>{{ record.modifierName }}</p>
                </div>
              </template>
              <template #updateTime="{ record }">
                <div class="content fix-margin">
                  <!-- <p>修改时间</p> -->
                  <p>{{ record.modifiedTime }}</p>
                </div>
              </template>
            </DynamicTable>
          </div>
        </div>
        <div class="core">
          <DynamicForm :config="tsConfig" :questions="tsQuestions" />
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, computed, createVNode, getCurrentInstance, nextTick, onBeforeUnmount, reactive, ref, watch } from 'vue';
import { DynamicForm, DynamicTable } from '@/components/public-template';
import { checkFileIcon } from '@/utils/common';
import indexService from './copyOrMoveDialog';
import { fileCopyFile, fileMoveFile, fileCopyFolder, fileMoveFolder } from '@/config/api/fileInfo';
import { message, Modal } from 'ant-design-vue';
import { changeByte } from '@/utils/common';
import publicFolder from '@/assets/img/fileImg/filePublicFolder.png';
import personalImg from '@/assets/img/fileImg/filePersonalFolder.png';
import { fileGetFoldersWithPriv } from '@/config/api/fileInfo';
import { Api, deptBatchDelete, deptGet, deptGetChildrenFolders, deptSave, fileGetPreviewFileUrl, savePermission, getPermission, fileOptlist, setAsCurrent } from '@/config/api/deptFile';

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  data: {
    type: Object
  },
  showType: {
    type: String,
    default: null
  },
  fileSource: {
    type: Number //文件归类 1=个人,2=项目,3= 部门 ,4=资源文件,5=档案文件,6=公共文件
  }
});

const state = reactive({
  searchName: '',
  selectedKeys: [],
  expandedKeys: [], //默认展开的树节点
  treeData: [],
  childData: []
});
const emit = defineEmits(['update:visible']);
const fileRef = ref(null);
const breadcrumbs: any = ref([]);
const { proxy }: any = getCurrentInstance();
const dyConfig: any = {
  labelCol: 4,
  wrapperCol: 18,
  grid: 12, // 分栏
  style: 'table-form',
  cancelSave: true // 隐藏底部按钮
};
const tsConfig: any = {
  labelCol: 8,
  style: 'form',
  cancelSave: true // 隐藏底部按钮
};
const dyTableConfig: any = reactive({
  name: 'copyOrMoveFile',
  queryUrl: Api.deptQueryFolderWithFilePage,
  protType: 'post',
  isShowHeader: true,
  rowSelection: {
    type: 'checkbox'
  },
  params: { parentId: '' } // ignoreUploadingFile 默认忽略C端正在上传的文件
});

const dyQuestions: any = reactive(indexService.getQuestions());
const dyTable: any = reactive(indexService.getTables());
const tsQuestions: any = reactive(indexService.getTargetQuestions());

// 文件图片展示
function personalFolder(record) {
  return record.id === record.deptId ? personalImg : publicFolder;
}
onMounted(() => {
  getFolderTree();
});

// 获取目录树
function getFolderTree() {
  const params = props.data.folder
    ? {
        manager: true
      }
    : { uploadPriv: true };
  fileGetFoldersWithPriv(params).then((res) => {
    if (res.success) {
      res.data.map((item) => {
        item.isLeaf = !item.hasChildren;
        item.children = state.childData;
      });
      state.treeData = [{ name: '全部', id: '', children: res.data, hasChildren: true }];
    }
  });
}

// fileGetFoldersWithPriv({ parentId: '1746802004073775105', manager: true }).then((res) => {
//   if (res.success) {
//     console.log(res.data, 444);
//   }
// });

// 树数据懒加载
const onLoadData = (treeNode) => {
  return new Promise((resolve: any) => {
    if (treeNode.dataRef.children) {
      resolve();
      return;
    }
    // const params = props.data.folder
    //   ? { manager: true, parentId: treeNode.dataRef.id, categorize: props.fileSource }
    //   : { uploadPriv: true, parentId: treeNode.dataRef.id, categorize: props.fileSource };
    // fileGetFoldersWithPriv(params).then((res) => {
    //   if (res.success) {
    //     state.childData = res.data.map((item) => {
    //       item.isLeaf = !item.hasChildren;
    //       return res.data;
    //     });
    //     treeNode.dataRef.children = res.data;
    //     state.treeData = [...state.treeData];
    //     resolve();
    //   }
    // });
  });
};

const handleOk = () => {};

const handleCancel = () => {
  emit('update:visible', false);
};

const folderClick = (node) => {};
</script>

<style lang="less" scoped>
:deep(.tree-warpper) {
  .ant-tree-switcher {
    line-height: 36px;
  }
  .ant-tree-node-content-wrapper {
    min-height: 36px;
    line-height: 36px;
    &.ant-tree-node-selected {
      background-color: #e5eefd;
      color: #005aea;
    }
  }
  :deep(.ant-form-item) {
    margin-bottom: 0;
  }
  .content {
    @apply text-black text-opacity-45;
    p:nth-child(2) {
      display: inline-block;
    }
  }
  .fix-margin {
    p {
      margin: 0px !important;
    }
  }
  /deep/.ant-tree-node-content-wrapper {
    display: flex;
    align-items: center;
  }
  .hierarchy {
    cursor: pointer;
  }
  .hierarchy:hover {
    color: #409eff;
  }
}
.core {
  border-top: 1px solid rgba(204, 204, 204, 0.5);
  /deep/.ant-form-item {
    margin-top: 24px;
  }
}
/deep/.ant-modal-body {
  padding-bottom: 0;
}
</style>
